<template>
  <view class="bszn-menu grid grid-cols-3 gap-3">
    <view
      class="bszn-item rounded-2"
      v-for="(item, index) in menuList"
      :key="index"
      :style="`background: linear-gradient(180deg, ${item.bgOffset0} 0%, ${item.bgOffset1} 100%);`"
      @click="onWorkGuideMenuItem(item)"
    >
      <image :src="item.icon" mode="aspectFit" class="rounded-1"></image>
      <div class="text-box text-[26rpx] color-black">
        <text class="max-w-full overflow-hidden text-ellipsis line-clamp-2">{{
          item.title
        }}</text>
      </div>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps({
  menuList: {
    type: Array,
    default: "",
  },
});
const emit = defineEmits(["onWorkGuideMenuItem"]);

const onWorkGuideMenuItem = (item: any) => {
  console.log("点击了更多");
  emit("onWorkGuideMenuItem", item);
};
</script>
<style lang="scss" scoped>
// 办事指南菜单
.bszn-menu {
  width: 100%;
  .bszn-item {
    height: 125rpx;
    box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
    text-align: center;
    position: relative;
    margin-top: 30rpx;
    background-color: #f3f8fb;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    > image {
      position: absolute;
      top: -15%;
      left: 50%;
      transform: translate(-50%, -15%);
      width: 60rpx;
      height: 60rpx;
    }
    .text-box {
      width: 90%;
      height: 68rpx;
      margin-bottom: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
